/* JS for tab "homepage" Visual Narrative Strategies panel & Editorial Layers */

class Homepage_Panel {

    constructor (btn_json_url, panel_title, panel_name) {
        this._btn_json_url = btn_json_url + "";
        this._panel_title = panel_title + "";
        this._panel_name  = panel_name + "";
        this._btn_queue = [];  // save btn items
        if(this._btn_json_url.substring(this._btn_json_url.length-5) !== ".json") {
            console.error("Please check your URL format (.JSON)!");
            return ;
        }
    }

    _createPanel () {
        let panel_node = document.createElement("div");
        let panel_title_html = `<h3 class="sidebar-panel-title"${this._panel_title}</h3>`;
        let panel_group_node = document.createElement("div");

        panel_node.classList.add("sidebar-panel");
        panel_node.setAttribute("id", this._panel_name.concat("-panel"));
        panel_group_node.classList.add("sidebar-panel-group");

        $.getJSON(this._btn_json_url, json => {

            json.forEach((item, i, jsonArr) => {
                let btn_node = this._createButton(item, this._panel_name, extraNode);
                this._appendTo_queue(btn_node); // append btn to panel queue
            });
        });

        this._btn_queue.forEach((btn_node, i, btn_queue) => panel_group_node.appendChild(btn_node));
        panel_node.innerHTML = panel_title_html;
        panel_title_html.appendChild(panel_group_node);
        return panel_node;
    }

    _createButton () {

    }

    _appendTo_queue (btn_node) {
        if(!(btn_node instanceof HTMLElement)) {
            console.error("This button item is not a HTML Element!");
            return false;
        }

        this._btn_queue.push(btn_node);
    }
}